<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { selectJingxuan } from "@/api/student/he/frontMain";
import router from "@/router";
const activities: any = reactive([]);
// 图片路径
const url =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";

const color = ref("");
const show = reactive({
  url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  classname: "",
  name: "",
  id: null,
  classtype: null,
});

onMounted(() => {
  selectJingxuan().then((res) => {
    activities.length = 0;
    if ((res.data.msg = "请求成功")) {
      activities.push(res.data.data);
      // console.log(res);
    }
  });
});

const showClass = (scope: any) => {
  show.url = scope.img;
  show.classname = scope.className;
  show.name = scope.teacherName;
  show.id = scope.id;
  show.classtype = scope.classType;
};

const courseStudy = (id: any) => {
  if (show.classtype == 1) {
    router.push({
      path: "/FrontPaidClass",
      query: {
        id: id,
      },
    });
  } else if (show.classtype == 0) {
    router.push({
      path: "/FrontFreeClass",
      query: {
        id: id,
      },
    });
  }
};
</script>

<template>
  <h5>精选课程</h5>
  <div class="course">
    <div class="video">
      <el-image style="width: 100%; height: 100%" :src="show.url" fit="fit" />
      <div id="show">
        <div>
          <div>
            <div style="color: white; font-size: 16px">
              {{ show.classname }}
            </div>
            <div>
              <el-button type="primary" @click="courseStudy(show.id)"
                >立即学习</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <el-scrollbar height="400px">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities[0]"
            :key="index"
            :timestamp="activity.timestamp"
            class="courseList"
            :color="color"
            @click="showClass(activity)"
          >
            <span class="classid">{{ activity.id }}</span>

            {{ activity.className }}
            ({{ activity.totalVideoTime }}分钟)
          </el-timeline-item>
        </el-timeline>
      </el-scrollbar>
    </div>
  </div>
</template>
<style scoped>
h5 {
  text-align: center;
}
.course {
  display: flex;
  justify-content: space-between;
}
.video {
  width: 50%;
  height: 300px;
  position: relative;
  background-color: red;
}
.list {
  width: 45%;
}

.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.classid {
  display: inline-block;
  background-color: gainsboro;
  padding: 5px;
  line-height: 15px;
  text-align: center;
  margin: 0px 10px;
}
.classid:hover {
  background-color: #409eff;
}

#show {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.297);
  position: absolute;
  top: 0;
  left: 0;
}
#show > div:first-child {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>
